<template>
  <!-- 关注页 -->

  <div>
    <!-- 1.头部--我的关注 -->
    <topNav titleText="我的关注"></topNav>

    <!-- 2.关注栏目 -->
    <div class="column" v-for="(item,index) in attentlist" :key="item.id">
      <img v-if="attentlist" :src="$axios.defaults.baseURL+item.head_img" alt />
      <img v-else src="@/assets/logo.png" alt />
      <div class="infoBox">
        <div class="title">{{item.nickname}}</div>
        <div class="date">{{item.create_date.split('T')[0]}}</div>
      </div>
      <div v-if="item.isFollow" class="cancelBtn" @click="deleteAttent(item.id,index)">取消关注</div>
      <button v-else class="follow" @click="follow(item.id,index)">{{gz}}</button>
    </div>
  </div>
</template>

<script>
import topNav from "@/components/topNav";
export default {
  components: {
    topNav: topNav
  },
  //数据
  data() {
    return {
      //关注数组
      attentlist: [],
      //关注
      gz: "关注"
    };
  },
  //声明周期钩子函数，页面加载完成触发一次
  mounted() {
    this.loadAttent();
  },
  //方法
  methods: {
    //渲染我的关注数据
    loadAttent() {
      this.$axios({
        url: "/user_follows/"
      }).then(res => {
        console.log(res.data);
        //改造数据
        //用映射生成新的数据,复制不会影响原始数据
        //先进行改造，在赋值给data数据
        const newData = res.data.data.map(user => {
          //...是展开运算符
          return { ...user, isFollow: true };
        });
        this.attentlist = newData;
        console.log(newData);

        // this.attentlist = res.data.data;
      });
    },
    //删除我的关注
    deleteAttent(id, index) {
      //点击取消关注发起axios请求
      console.log(id);
      this.$axios({
        url: "/user_unfollow/" + id,
        mounted: "get"
      }).then(res => {
        console.log(res.data);
        this.attentlist[index].isFollow = false;
        console.log(this.attentlist[index].isFollow);
      });
    },
    // 关注
    follow(id, index) {
      this.$axios({
        url: "/user_follows/" + id,
        method: "get"
      }).then(res => {
        console.log(res.data);
        this.attentlist[index].isFollow = true;
        console.log(this.attentlist[index].isFollow);
      });
    }
  }
};
</script>

<style lang="less" scoped>
//栏目容器
.column {
  width: 100vw;
  height: 16.667vw;
  display: flex;
  padding: 2.222vw 5vw 0;
  border-bottom: 1px solid #ccc;
  //图片
  img {
    width: 11.111vw;
    height: 11.111vw;
    border-radius: 50%;
  }
  //标题和日期容器
  .infoBox {
    margin-left: 5vw;
    flex: 1;
    //标题1
    .title {
      font-size: 4.444vw;
    }
    //日期
    .date {
      padding-top: 1.111vw;
      font-size: 3.889vw;
      color: #808080;
    }
  }
  //取消关注容器
  .cancelBtn {
    font-size: 3.33vw;
    background: #e4e4e4;
    padding: 0 5vw;
    text-align: center;
    height: 10vw;
    line-height: 10vw;
    color: red;
    border-radius: 5vw;
  }
  .follow {
    font-size: 3.33vw;
    background: #e4e4e4;
    padding: 0 8vw;
    height: 10vw;
    line-height: 10vw;
    border-radius: 5vw;
    color: steelblue;
    border: none;
  }
}
</style>